import React, { useState } from 'react';
import { Button, message, Modal } from 'antd';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { batchRemove } from '../service';

const BatchRemove = (props) => {
  const { ids, onSuccess } = props;
  const [uploading, setUploading] = useState(false);

  // 处理
  const handle = async () => {
    const key = 'batch_remove';
    setUploading(true);
    message.loading({ content: ' 批量删除中...', key });
    const result = await batchRemove({ ids });
    setUploading(false);
    if (result.success) {
      message.success({ content: '批量删除成功', key });
      await onSuccess();
      return;
    }
    message.error({ content: result.message, key });
  };

  return (
    <>
      <Button
        type="dashed"
        danger
        loading={uploading}
        onClick={() => {
          Modal.confirm({
            title: '确定要批量删除所选的数据吗？',
            icon: <ExclamationCircleOutlined />,
            content: '确认删除后将无法找回，永久在系统中消失！',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            async onOk() {
              await handle();
            },
          });
        }}
      >
        <DeleteOutlined /> 批量删除
      </Button>
    </>
  );
};

export default BatchRemove;
